<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=EDGE">
    <title>echart北京地图</title>
    <!--<link rel="stylesheet" type="text/css" href="css/main.css"/>-->
    <script src="js/jquery.min.js"></script>
    <script src="js/echarts.min.js"></script>
    <script src="js/province/beijing.js"></script>
    <style>#china-map {width:1000px; height: 1000px;margin: auto;}</style>
</head>
<body>
<div id="china-map"></div>

<script type="text/javascript">  
$(function(){  
      
        //使用echarts.init()方法初始化一个Echarts实例，在init方法中传入echarts map的容器 dom对象  
    var mapChart = echarts.init(document.getElementById('china-map'));  
    // mapChart的配置  
    var option = {  
           title:{  
            text: '北京各区示意图',  
            left:'center'  
        },  
        tooltip: {  
                trigger: 'item',  
                formatter: '{b}<br/>{c} (个)'  
            },  
            toolbox: {  
               show: true,  
               orient: 'vertical',  
               left: 'right',  
               top: 'center',  
               feature: {  
                   dataView: {readOnly: false},  
                   restore: {},  
                   saveAsImage: {}  
               }  
            },  
            visualMap: {  
                    min: 0,  
                    max: 2000,  
                    text:['高','低'],  
                    realtime: false,  
                    calculable: true,  
                    inRange: {  
                        color: ['lightskyblue','yellow', 'orangered']  
                    }  
            },  
            series:[  
                {  
                    name: '北京各区',  
                    type: 'map',//type必须声明为 map 说明该图标为echarts 中map类型  
                    map: '北京', //这里需要特别注意。如果是中国地图，map值为china，如果为各省市则为中文。这里用北京  
                    aspectScale: 0.75, //长宽比. default: 0.75  
                    zoom: 1.2,  
                    //roam: true,  
                    itemStyle:{  
                        normal:{label:{show:true}},  
                        emphasis:{label:{show:true}}  
                    },  
                    data: [  
                        {name:'东城区', value: 1800},  
                        {name:'西城区', value: 1700},  
                        {name:'朝阳区', value: 1600},  
                        {name:'丰台区', value: 1400},  
                        {name:'石景山区', value: 1200},  
                        {name:'海淀区', value: 1000},  
                        {name:'门头沟区', value: 800},  
                        {name:'房山区', value: 600},  
                        {name:'通州区', value: 400},  
                        {name:'顺义区', value: 200},  
                        {name:'昌平区', value: 100},  
                        {name:'大兴区', value: 300},  
                        {name:'怀柔区', value: 500},  
                        {name:'平谷区', value: 700},  
                        {name:'密云县', value: 900},  
                        {name:'延庆县', value: 1100}  
                          
                    ]  
                }  
            ]  
    };  
        //设置图表的配置项  
        mapChart.setOption(option);  
      
})  
</script>  



<!--<script>
    var myChart = echarts.init(document.getElementById('china-map'));
    var option = {
        title : {
            text: '订单量',
            subtext: '纯属虚构',
            x:'center'
        },
        tooltip : {//提示框组件。
            trigger: 'item'//数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
        },
        legend: {
            orient: 'horizontal',//图例的排列方向
            x:'left',//图例的位置
            data:['订单量']
        },

        visualMap: {//颜色的设置  dataRange
            x: 'left',
            y: 'center',
            splitList: [
                {start: 1500},
                {start: 900, end: 1500},
                {start: 310, end: 1000},
                {start: 200, end: 300},
                {start: 10, end: 200, label: '10 到 200（自定义label）'},
                {start: 5, end: 5, label: '5（自定义特殊颜色）', color: 'black'},
                {end: 10}
            ],
//            min: 0,
//            max: 2500,
//            calculable : true,//颜色呈条状
            text:['高','低'],// 文本，默认为数值文本
            color: ['#E0022B', '#E09107', '#A3E00B']
        },
        toolbox: {//工具栏
            show: true,
            orient : 'vertical',//工具栏 icon 的布局朝向
            x: 'right',
            y: 'center',
            feature : {//各工具配置项。
                mark : {show: true},
                dataView : {show: true, readOnly: false},//数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。
                restore : {show: true},//配置项还原。
                saveAsImage : {show: true}//保存为图片。
            }
        },
        roamController: {//控制地图的上下左右放大缩小 图上没有显示
            show: true,
            x: 'right',
            mapTypeControl: {
                'china': true
            }
        },
        series : [
            {
                name: '订单量',
                type: 'map',
                mapType: 'shanxi1',
                roam: false,//是否开启鼠标缩放和平移漫游
                itemStyle:{//地图区域的多边形 图形样式
                    normal:{//是图形在默认状态下的样式
                        label:{
                            show:true,//是否显示标签
                            textStyle: {
                                color: "rgb(249, 249, 249)"
                            }
                        }
                    },
                    emphasis:{//是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
                        label:{show:true}
                    }
                },
                top:"3%",//组件距离容器的距离
                data:[
                    {name: '西安',value: Math.round(Math.random()*2000)},
                    {name: '安康',value: Math.round(Math.random()*2000)},
                    {name: '渭南',value: Math.round(Math.random()*2000)},
                    {name: '铜川',value: Math.round(Math.random()*2000)},
                    {name: '榆林',value: 0},
                    {name: '商洛',value: Math.round(Math.random()*2000)},
                    {name: '汉中',value: 5},
                    {name: '宝鸡',value: 305},
                    {name: '咸阳',value: Math.round(Math.random()*2000)},
                   {name: '延安',value: Math.round(Math.random()*2000)},
                ]
            }
        ]
    };
    myChart.setOption(option);
    myChart.on('mouseover', function (params) {
        var dataIndex = params.dataIndex;
        console.log(params);
    });
</script>-->
</body>
</html>